<template>
  <el-link
    :type="type"
    :icon="icon"
    :disabled="!varient"
    :underline="false"
    :target="varient ? target : ''"
    :href="to"
    class="zeda-link"
  >
    <template v-if="underline">
      <u
        ><slot>{{ label }}</slot></u
      >
    </template>
    <template v-else>
      <slot>{{ label }}</slot>
    </template>
  </el-link>
</template>
<script>
import constants from "./constants";
export default {
  props: {
    varient: { type: String, default: "" },
    label: { type: [Number, String], default: "" },
    underline: { type: Boolean, default: false },
    type: { type: String, default: "info" },
    icon: { type: String, default: "" },
    target: { type: String, default: "_self" },
    params: { type: Object, default: () => {} },
  },
  computed: {
    to() {
      if (!this.varient) return "";
      const url = constants[this.varient];
      const location = this.$router.resolve({ path: url, query: this.params });
      return location.href;
    },
  },
};
</script>
<style lang="scss">
.zeda-link {
  vertical-align: baseline;
  font-size: inherit;
}
.zeda-link.el-link.el-link--info.is-disabled {
  color: #909399 !important;
}
.zeda-link.el-link.el-link--primary.is-disabled {
  color: #ec6324;
}
</style>
